<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/mycss.css">
    <script src="js/jquery.js"></script>
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <div class="left_nav">
        <li class="first_line"><img src="images/right_arrow.png" alt="" srcset="" width="20px"
                style="line-height: 20px;float: left;" class="drop_down_icon"><span
                style="float: left;margin-left: 10px;">XXX集团</span></li>
        <ul>
            <li class="second_drop"><img src="images/right_arrow.png" alt="" srcset="" width="20px"
                    style="line-height: 20px;float: left;" class="drop_down_icon2">变压器</li>
            <ul class="second_drop_area">
                <li>一期1号变压器</li>
                <li>一期2号变压器</li>
                <li>二期1号变压器</li>
                <li>二期2号变压器</li>
            </ul>
            <li class="third_drop"><img src="images/right_arrow.png" alt="" srcset="" width="20px"
                    style="line-height: 20px;float: left;" class="drop_down_icon3">压缩机</li>
            <ul class="third_drop_area">
                <li>1号压缩机</li>
                <li>2号压缩机</li>
            </ul>
        </ul>
    </div>

    <div style="width: 700px;height: 500px;position: absolute;left: 30%;top: 15%;opacity: 0.7;">
        <iframe src="https://www.thingjs.com/s/a6a76d8c702be9cfe2d8adf2" frameborder="0" scrolling="no"
            style="width: 100%;height: 100%;"></iframe>
    </div>

    <div style="position: absolute;  left: 10%;
    bottom:15%;background: #01132C;border: 2px solid #3C60B8;  width: 500px;
    height: 300px;">
        <h4 style="color: white;margin-left: 10px;width: 340px;
        line-height: 40px;
        background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">
            运行数据</h4>
        <div id="yunxing">

        </div>
    </div>

    <div style="position: absolute;  right: 12%;
    top:4%;background: #01132C;border: 2px solid #3C60B8;  width: 500px;
height: 300px;">
        <h4 style="color: white;margin-left: 10px;width: 340px;
 line-height: 40px;
 background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">
            运行效率</h4>
        <div id="xiaolv">

        </div>

    </div>


    <div class="xiaolv_table">
        <h4 style="color: white;margin-left: 10px;width: 340px;
            line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">
            运行异常</h4>
        <table style="border-collapse:collapse;text-align: center;">
            <thead>
                <tr style="color: white;">
                    <th>报警名称</th>
                    <th>报警等级</th>
                    <th>时间</th>
                </tr>
            </thead>

            <tbody>
                <tr style="color: white;">
                    <td>报警一</td>
                    <td style="color: red;">严重</td>
                    <td>10:29</td>
                </tr>
                <tr style="color: white;">
                    <td>报警二</td>
                    <td style="color: yellow;">一般</td>
                    <td>14:11</td>
                </tr>
                <tr style="color: white;">
                    <td>报警三</td>
                    <td style="color: yellow;">一般</td>
                    <td>15:01</td>
                </tr>
                <tr style="color: white;">
                    <td>报警四</td>
                    <td style="color: orange;">中等</td>
                    <td>17:41</td>
                </tr>


            </tbody>
        </table>
    </div>

    <script>
        var firstClickCount = 0;
        var secondClickCount = 0;
        var thirdClickCount = 0;
        $('.first_line').click(function () {
            console.log('first:' + firstClickCount)
            if (firstClickCount % 2 == 0) {
                $('.drop_down_icon').attr('src', 'images/drop_down.png');
                $('.second_drop').css('display', 'inline');
                $('.third_drop').css('display', 'inline');
                firstClickCount++;
            } else {
                $('.drop_down_icon').attr('src', 'images/right_arrow.png');
                $('.second_drop').css('display', 'none');
                $('.third_drop').css('display', 'none');
                $('.third_drop_area').css('display', 'none');
                firstClickCount++;
            }
        })

        $('.second_drop').click(function () {
            console.log('second:' + secondClickCount)
            if (secondClickCount % 2 == 0) {
                $('.drop_down_icon2').attr('src', 'images/drop_down.png');
                $('.second_drop_area').css('display', 'inline');
                $('.third_drop').css('top', '26%')
                $('.third_drop_area').css('top', '30%')
                secondClickCount++;
            } else {
                $('.drop_down_icon2').attr('src', 'images/right_arrow.png');
                $('.second_drop_area').css('display', 'none');
                $('.third_drop').css('top', '10%')
                $('.third_drop_area').css('top', '14%')
                secondClickCount++;
            }
        })


        $('.third_drop').click(function () {
            console.log('third:' + thirdClickCount)
            if (thirdClickCount % 2 == 0) {
                $('.drop_down_icon3').attr('src', 'images/drop_down.png');
                $('.third_drop_area').css('display', 'inline');
                $('.third_drop_area').css('top', '30%')
                thirdClickCount++;
            }
            else {
                $('.drop_down_icon3').attr('src', 'images/right_arrow.png');
                $('.third_drop_area').css('display', 'none');
                $('.third_drop_area').css('top', '30%')
                thirdClickCount++;
            }
        })

        window.onload = function () {
            var yunxingDiv = document.getElementById('yunxing');
            var yunxingChart = echarts.init(yunxingDiv);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        },
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        },
                    }
                },
                series: [{
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line',
                    itemStyle: {
                        color: '#5C89FF'
                    }
                }],
                grid: {
                    top: '-5%'
                }
            };


            option && yunxingChart.setOption(option);
        }

        $(document).ready(function () {
            var chartDom = document.getElementById('xiaolv');
            var myChart = echarts.init(chartDom);
            var option;

            option = {

                series: [{
                    type: 'gauge',
                    axisLine: {
                        lineStyle: {
                            width: 40,
                            color: [
                                [0.3, '#67e0e3'],
                                [0.7, '#37a2da'],
                                [1, '#fd666d']
                            ]
                        }
                    },
                    pointer: {
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    axisLabel: {
                        color: 'auto',
                        distance: 20,
                        fontSize: 10
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value} %',
                        color: 'auto',
                        fontSize: 10
                    },
                    data: [{
                        value: 70
                    }],
                }]
            };

            setInterval(function () {
                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                myChart.setOption(option, true);
            }, 2000);

            option && myChart.setOption(option);

        })

    </script>
</body>

</html>